<template>
  <v-chart
    @click="handleClick"
    class="chart"
    :style="{ height }"
    :options="options"
    ref="myChart"
  ></v-chart>
</template>

<script>
export default {
  props: {
    // defaultIndex: {
    //   type: Number,
    //   default: undefined
    // },
    height: {
      type: String,
      default: "350px",
    },
    formatter: {
      type: String,
      default: "{b}\n{d}%",
    },
    data: {
      type: Array,
      default: () => [],
    },
    name: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      currentIndex: 0,
      text: ''
    };
  },
  computed: {
    options() {
      let echarts = this.$echarts;
      let { data, formatter } = this;
      //提案质量占比
      return {
        title: {
          text:this.name,
          x: 'center',
          y: 'center',
          textStyle: {
            fontSize: 18,
            color: '#333',
            lineHeight: 30
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        legend: {
          right: "8%",
          top: "middle",
          show: true,
          orient: "vertical",
          textStyle: {
            color: "#333",
            lineHeight: 23
          },
          selectedMode:true,
        },
        color: [
          "#08E2FA",
          "#8369F4",
          "#FF6F18",
          "#4794F2",
          "#FFAD3D",
          "#e26cff",
        ],
        series: [
          {
            name: "占比",
            type: "pie",
            center: ['50%', '50%'],
            radius: ['50%', '75%'],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            label: {
              show: false,
              formatter: formatter,
              align: "center",
            },
            labelLine: {
              show: false,
            },
            emphasis: {
              itemStyle: {
                shadowColor: 'rgba(1, 1, 1, 0.3)',
                shadowBlur: 15,
              },
            },
            data: data,
          },
        ],
      };

    },
  },
  mounted() {
    window.addEventListener("resize", this.resizeTheChart);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeTheChart);
  },
  methods: {
    resizeTheChart() {
      if (this.$refs.myChart) {
        this.$refs.myChart.resize();
      }
    },
    handleClick(e) {
      if (e.dataIndex != this.currentIndex) {
        this.$refs.myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: this.currentIndex
        });
        this.flag = true;
      } else {
        this.flag = !this.flag;
      }
      if (this.flag) {
        this.$refs.myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: e.dataIndex
        });
      } else {
        this.$refs.myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: e.seriesIndex,
          dataIndex: e.dataIndex
        });
      }
      this.currentIndex = e.dataIndex;
      this.text = e.data.name;
      console.log("flag：", this.flag)

      this.$emit('e-click', e, this.name, this.flag)
    },

  },
};
</script>

<style lang="stylus" scoped>
.chart {
  width: 100%;
}
</style>
